<template>
  <view class="tabs">

    <view class="tabs_title">
      <view class="title_item" @click="IsActive(index)" :class="[item.isActive?'active':'']"
        v-for="(item,index) in tabs" :key="item.id">
        {{item.value}}
      </view>

    </view>
    <view class="tabs_content">
      <slot></slot>
    </view>
  </view>
</template>
<script>
export default {
  name: "",
  props: {
    tabs: {
      type: Array,
      value: [],
    },
  },
  data() {
    return {
      // IsActiveindex: 0,
    };
  },
  onLoad() {},
  methods: {
    IsActive(index) {
      // this.IsActiveindex = index;
      this.$emit("myEven", index);
      // console.log(index, "index");
    },
  },
};
</script>
<style lang='less' scoped>
.active {
  color: #f95314;
  border-bottom: 4px solid #f95314;
}
.tabs {
  .tabs_title {
    display: flex;
    padding: 15rpx 0;
    .title_item {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
    }
  }
  .tabs_content {
  }
}
</style>